import React, { useState, useEffect } from 'react'
import axios from "axios";
import '../wch/css/login.css'
import '../wch/css/phone.css'
import { MailOutline, BankcardOutline, FaceRecognitionOutline, PhonebookOutline } from 'antd-mobile-icons'
import { NavBar, Input, Footer, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom';
export default function Login() {
    // 路由跳转
    const navigate = useNavigate()
    const back = () => {
        navigate('/login')
    }

    const fh = () => {
        navigate('/email')
    }

    const face = () => {
        navigate('/face')
    }

    const register = () => {
        navigate('/register')
    }

    // 点击边框变色
    const [clickedElement, setClickedElement] = useState(null);

    const handleClick = (id) => {
        setClickedElement(id); // 设置当前点击的元素 ID
    };

    const getBorderStyle = (id) => {
        if (clickedElement === id) {
            return { borderColor: '#ff6262' }; // 如果当前元素被点击，返回橙色边框样式
        }
        return {}; // 否则返回空对象，即默认边框样式
    };

    // 邮箱登录
    const [email, setEmail] = useState('')
    const [num, setNum] = useState('')

    const getEmail = async () => {
        if (email.indexOf('@') === -1) {
            Toast.show({
                icon: 'fail',
                content: '请输入邮箱账号',
            })
            return
        }
        let data = await axios.post('http://127.0.0.1:3000/email', { email })
        console.log(data);
        startCountdown()
        localStorage.setItem('email', email)
        localStorage.setItem('email_code', data.data.code)
    }

    const getCode = async () => {
        if (email.indexOf('@') === -1) {
            Toast.show({
                icon: 'fail',
                content: '请输入邮箱账号',
            })
            return
        }
        if (email === '') {
            Toast.show({
                icon: 'fail',
                content: '验证码不能为空',
            })
            return
        }
        if (num != localStorage.getItem('email_code')) {
            console.log(email);
            Toast.show({
                icon: 'fail',
                content: '验证码不正确',
            })
            return
        }
        let res = await axios.post('http://127.0.0.1:3000/getEmail', { email, num })
        if (res.data.code) {
            navigate('/index_d')
        } else {
            Toast.show({
                icon: 'fail',
                content: '登录失败',
            })
        }
    }

    // 点击获取验证码倒计时
    const [numflag, setNumflag] = useState(false) // 倒计时flag
    const [countdown, setCountdown] = useState(60)// 倒计时渲染

    const startCountdown = () => {
        setNumflag(true)
        const intervalId = setInterval(() => {
            setCountdown(item => {
                if (item === 1) {
                    clearInterval(intervalId)
                    setCountdown(60)
                    setNumflag(false)
                    return 60
                } else {
                    return item - 1
                }
            })
        }, 2000)
    }
    useEffect(() => {
        if (countdown === 60) {
            setNumflag(false)
        }
    }, [countdown])

    return (
        <div id='li_login'>
            {/* 导航栏 */}
            <div id='login_header'>
                <div id='header_inco' onClick={back}>
                    <NavBar></NavBar>
                </div>
            </div>
            {/* 本机手机号码登录 */}
            <div id='login_content'>
                <div id='login_content1'>
                    <div id='login_content_inco'>
                        <div id='login_content_p'>票</div>
                    </div>
                </div>
                <div id='login_content2'>邮箱验证登录</div>
            </div>

            {/* 手机号登录 */}
            <div id="li_phone">
                <div id='li_number' style={getBorderStyle('li_number')} onClick={() => handleClick('li_number')}>
                    <div id='number_inco'>
                        <MailOutline color='#ff976a' />&nbsp;&nbsp;<span>QQ</span>
                    </div>
                    {/* 手机号 */}
                    <div id='number_input'>
                        <Input placeholder='请输入邮箱号码' value={email} onChange={(e) => setEmail(e)} ></Input>
                    </div>
                </div>
                {/* 验证码 */}
                <div id='li_yzm' style={getBorderStyle('li_yzm')} onClick={() => handleClick('li_yzm')}>
                    <div id='yzm_inco'><BankcardOutline color='#ff976a' /></div>
                    <div id='yzm_input'>
                        <Input placeholder='请输入验证码' value={num} onChange={(e) => setNum(e)}></Input>
                    </div>
                    <div id='find_yzm' disabled={numflag} onClick={getEmail}>{numflag ? countdown : '获取验证码'}</div>
                </div>
            </div>
            <div id='login_div' onClick={getCode}>登录</div>

            <div id='login_qh' onClick={register}>未注册的用户将要去创建新账号</div>

            <div id='login_div1'>
                <Footer label='或通过一下方式登录'></Footer>
            </div>

            <div id='login_footer'>
                <div id='login_footers' onClick={face}><div style={{ marginLeft: '8px', marginTop: '7px', color: '#ff976a' }}><PhonebookOutline /></div></div>
                <div id='login_footers' onClick={face}><div style={{ marginLeft: '8px', marginTop: '7px', color: '#ff976a' }}><FaceRecognitionOutline /></div></div>
                <div id='login_footers' onClick={email}><div style={{ marginLeft: '8px', marginTop: '7px', color: '#ff976a' }}><MailOutline /> </div></div>
            </div>

            <div id='login_out'>
                <div id='login_footer2'>登录或注册代表您同意<span style={{ color: '#ff7363' }}>用户服务协议</span></div>
            </div>

        </div>
    )
}
